<script setup lang="ts">
import { useMenuStore } from '@/pinia//useMenuStore';

const MenuStore = useMenuStore();
const { isCollapse } = storeToRefs(MenuStore);
const menulist = MenuStore.menuList;
</script>

<template>
  <el-menu
    class="el-menu-vertical-demo"
    router
    :default-active="$route.path"
    :collapse="isCollapse"
    background-color="transparent"
    text-color="rgb(229 231 235)"
    :collapse-transition="false"
  >
    <template v-for="menu in menulist" :key="menu.path">
      <template v-if="menu.children.length === 0">
        <el-menu-item :index="menu.path">
          <MyImg :name="menu.meta.icon ?? 'ele-Paperclip'" />
          <span>{{ menu.meta.title }}</span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-sub-menu :index="menu.path">
          <template #title>
            <MyImg :name="menu.meta.icon ?? 'ele-Paperclip'" :size="16" />
            <span>{{ menu.meta.title }}</span>
          </template>
          <el-menu-item :index="cmenu.path" v-for="cmenu in menu.children" :key="cmenu.path">{{ cmenu.meta?.title }}</el-menu-item>
        </el-sub-menu>
      </template>
    </template>
  </el-menu>
</template>

<style lang="scss" scoped></style>
